<template>
  <div>
    <el-dialog
      :model-value="dialogAsync"
      width="30%"
      :title="isEdit ? '修改密码' : '新建终端用户'"
      :center="true"
      :close-on-click-modal="false"
      @open="openDialog"
      @close="closeDialog"
    >
      <div class="config-body">
        <el-form
          ref="ruleFormRef1"
          :model="data.ruleForm1"
          status-icon
          :rules="data.rules"
          label-width="100px"
          class="elform px-10"
        >
          <el-form-item label="用户名" prop="guardUsername">
            <el-input
              :disabled="isEdit"
              v-model="data.ruleForm1.guardUsername"
              type="text"
              autocomplete="off"
              placeholder="请输入用户名"
            />
          </el-form-item>
          <!-- <el-form-item v-if="isEdit" label="旧密码" prop="oldPasswordHash">
            <el-input
              v-model="data.ruleForm1.oldPasswordHash"
              type="password"
              autocomplete="off"
              placeholder="请输入旧密码"
            />
          </el-form-item> -->
          <el-form-item :label="isEdit ? '新密码' : '密码'" prop="passwordHash">
            <el-input
              v-model="data.ruleForm1.passwordHash"
              type="password"
              autocomplete="off"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item label="确认密码" prop="passwordConfirm">
            <el-input
              v-model="data.ruleForm1.passwordConfirm"
              type="password"
              autocomplete="off"
              placeholder="请再次输入密码"
            />
          </el-form-item>
          <el-form-item v-if="!isEdit" v-show="showRole" label="角色" prop="role">
            <el-select v-model="data.ruleForm1.guardRoleId" :disabled="isEdit">
              <el-option
                v-for="item in roleOptions"
                :key="item.guardRoleId"
                :label="item.guardRoleName"
                :value="item.guardRoleId"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { buildLocaleContext, tourStepEmits } from "element-plus";
import { ref, reactive } from "vue";
import { req_getTerminalRoleList } from "~/utils/axios/index.js";
const props = defineProps({
  dialogAsync: {
    type: Boolean,
    default: false,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
  guardUsername: {
    type: String,
  },
  showRole: {
    type: Boolean,
    default: true,
  },
});
const ruleFormRef1 = ref();

const validatePass = (rule, value, callback) => {
  if (data.ruleForm1.passwordConfirm !== "") {
    if (!ruleFormRef1.value) return;
    ruleFormRef1.value.validateField("passwordConfirm", () => null);
  }
  callback();
};
const validPassword = (rule, value, callback) => {
  // var reg = /^(\w){8,20}$/;
  if (value.length > 20 || value.length < 8) {
    callback(new Error("密码只能输入8-20个字符"));
  } else {
    callback();
  }
};
const validatePass2 = (rule, value, callback) => {
  if (value !== data.ruleForm1.passwordHash) {
    callback(new Error("两次输入的密码不一致！"));
  } else {
    callback();
  }
};
const validcodeName = (rule, value, callback) => {
  var reg = /^[a-zA-Z]\w{3,15}$/;
  if (!reg.test(value)) {
    callback(new Error("账号必须是由字母开头4-16位数字和字母组合"));
  } else {
    callback();
  }
};
const roleOptions = ref([]);
const data = reactive({
  ruleForm1: {
    guardUsername: "",
    // oldPasswordHash: "",
    passwordHash: "",
    passwordConfirm: "",
    guardRoleId: "5af15426-e914-49e5-8398-3fccf91127a8",
  },
  rules: {
    oldPasswordHash: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
    passwordHash: [
      { required: true, message: "密码不能为空", trigger: "blur" },
      { validator: validatePass, trigger: "blur" },
      { validator: validPassword, trigger: "blur" },
    ],
    passwordConfirm: [{ validator: validatePass2, trigger: "blur" }],
    guardUsername: [
      { required: true, message: "用户名不能为空", trigger: "blur" },
      { validator: validcodeName, trigger: "blur" },
    ],
  },
});

const openDialog = async () => {
  if (props.isEdit) data.ruleForm1.guardUsername = props.guardUsername;
  const { data: res } = await req_getTerminalRoleList();
  roleOptions.value = res || [];
};
const emits = defineEmits(["closeDialog", "addTerminalUser", "setPassword"]);
const submit = () => {
  ruleFormRef1.value.validate((valid, fields) => {
    if (valid) {
      if (props.isEdit) {
        emits("setPassword", data.ruleForm1);
      } else {
        emits("addTerminalUser", data.ruleForm1);
      }
      ruleFormRef1.value.resetFields();
    }
  });
};
const closeDialog = () => {
  ruleFormRef1.value.resetFields();
  emits("closeDialog", false);
};
</script>

<style lang="scss" scoped></style>
